<template>
  <el-container>
    <el-header
      class="header"
      height="30px"
    >
      <n-header></n-header>
    </el-header>
    <el-main class="main">
      <n-search-bar
        :logoSize="5"
        :searchSize="12"
        :otherSize="3"
        justify="center"
      >
        <template #search>
          <search-bar></search-bar>
        </template>
      </n-search-bar>
      <el-row
        :gutter="10"
        style="margin: 10px auto"
        justify="center"
      >
        <type-side style="margin-left: 15px"></type-side>
        <el-col :span="12">
          <el-carousel height="500px">
            <el-carousel-item
              v-for="item in 4"
              :key="item"
            >
              <el-image></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <user-info-side
          style="margin-right: 15px"
          :name="name"
          :avatar="avatar"
        ></user-info-side>
      </el-row>
      <el-row
        style="margin-top: 50px; font-weight: 900; font-size: 50px"
        justify="center"
      >为你推荐</el-row>
      <item-cards style="margin: 10px auto"></item-cards>
    </el-main>
    <el-footer style="background-color: blueviolet"> </el-footer>
  </el-container>
</template>

<script>
import ItemCardsVue from "@/components/index/ItemCards.vue";
import NHeaderVue from "@/components/NHeader.vue";
import SearchBarVue from "@/components/index/SearchBar.vue";
import TypeSideVue from "@/components/index/TypeSide.vue";
import UserInfoSideVue from "@/components/index/UserInfoSide.vue";
import NSearchBarVue from "@/components/NSearchBar.vue";
import { useUserInfo } from "@/store/user.js";
const userInfoState = useUserInfo();

export default {
  components: {
    NHeader: NHeaderVue,
    ItemCards: ItemCardsVue,
    SearchBar: SearchBarVue,
    TypeSide: TypeSideVue,
    NSearchBar: NSearchBarVue,
    UserInfoSide: UserInfoSideVue,
  },
  data() {
    return {
      address: "江苏",
      name: userInfoState.name,
      avatar: userInfoState.avatar,
      classify: [],
    };
  },
};
</script>

<style scoped>
.header {
  background-color: #eae5e3;
}

.main {
  background-color: #eae5e3;
  overflow: hidden;
  padding: 0;
}
</style>